.tab-nav{
  list-style: none;
  @include clearfix();
  margin-right: 5px;
  li{
    float: left;
    margin-bottom: -1px;
    >a{
      position: relative;
      outline: none;
      display: block;
      padding: 0.35em 1em;
    }
    &.active{
      >a{
        &:after{
          content: "";
          position: absolute;
          width: 100%;
          height: 1px;
          left: 0;
          bottom: -1px;
          z-index: 1;
        }
      }
    }
  }
}

.tab-content{
  display: none;
  padding: 20px 10px;
  border-top: none;
  margin-right: 5px;
  margin-bottom: 5px;
  &.active{
    display: block;
  }
}

.tabs{
  display: block;
  @include clearfix();
  //vertical layout
  &.vertical{
    .tab-nav{
      border-bottom: none;
      margin-right: 0;
      margin-bottom: -5px;
      float: left;
      width: 6em;
      text-align: right;
      li{
        float: none;
        margin-bottom: 0;
        >a{

        }
        &.active{
          >a{
            &:after{
              width: 1px;
              height: 100%;
              right:-1px;
              left: auto;
              bottom: 0;
            }
          }
        }
      }
    }

    .tab-content{
      float: left;
      box-sizing: border-box;
      //6em of width & 4px of border
      width: calc(100% - 6em - 4px);
      margin-left: -2px;
      min-height: 10em;
    }
  }
}

@each $key, $value in $theme{
  @if map-has_key($config, $key){
    .#{$value}{

      .tab-nav{
        li{
          >a{
            border: 1px solid setStyle($config, $key, tab-border);
            background-color: setStyle($config, $key, tab-nav-bg-inactive);
          }
          &.active{
            >a{
              background-color: setStyle($config, $key, tab-bg);
              &:after{
                background-color: setStyle($config, $key, tab-bg);
              }
            }
          }
        }
      }

      .tab-content{
        border: 1px solid setStyle($config, $key, tab-border);
        border-bottom-left-radius: setStyle($config, $key, border-radius-base);
        border-bottom-right-radius: setStyle($config, $key, border-radius-base);
        background-color: setStyle($config, $key, tab-bg);
      }

      .tabs{
        &.vertical{
          .tab-nav{
            border-right: 1px solid setStyle($config, $key, tab-border);
          }

          .tab-content{
            border-top:1px solid setStyle($config, $key, tab-border);
          }
        }
      }

    }
  }
  @else {
    @warn "The key isn't defined in the map setting"
  }
}